import { useState, useEffect, Component } from "react";
import Comp0 from "./item.tsx";
import Comp1 from "./item1.tsx";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);
  const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
    console.log(ev.target.value);
    setCount(Number(ev.target.value));
  };

  const [a, setA] = useState({ a: 1, b: 4 });
  const onChange1 = (ev: React.SyntheticEvent) => {
    console.log(ev);
    setA({ ...a, a: a.a + 1 });
  };
  useEffect(
    function () {
      console.log("执行副作用函数");
      return () => {
        console.log("卸载");
      };
    },
    [a]
  );

  return (
    <>
      <div className="card">
        <button onClick={onChange1}>
          {a.a}|{JSON.stringify(a)}
        </button>
        <input value={count} onChange={onChange}></input>
      </div>

      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <input value={count} onChange={onChange}></input>
      </div>
      <Comp1 data={a}></Comp1>
      <Comp0 data={a}></Comp0>
    </>
  );
}

export default App;
